<template>
  <div class="orders">
    <div class="input">
      <el-input v-model="queryModel.query" placeholder="请输入要搜索的内容" class="input-with-select" size="large">
        <template #append>
          <el-button>
            <el-icon class="is-loading">
              <Search @click="queryModel.pagenum = 1; getlist()" />
            </el-icon>
          </el-button>
        </template>
      </el-input>
    </div>
    <Table :data="list" :cols="cols">
      <template v-slot:time="{ row: { create_time } }">
        {{ new Date(create_time + 1000).format() }}
      </template>
      <template v-slot:action="{ row }">
        <el-button type="primary" size="small" @click="updatalist(row)">修改</el-button>
        <el-button type="success" size="small" @click="kuaidilist(row)">订单物流</el-button>
      </template>
      <template v-slot:status="{ row }">
        <el-button v-if="row.pay_status == 0" type="danger">未付款</el-button>
        <el-button v-if="row.pay_status == 1" type="primary">已付款</el-button>
      </template>
    </Table>
    <!-- pay_status是否付款 -->
    <el-pagination :current-page="queryModel.pagenum" :page-size="queryModel.pagesize" :page-sizes="[5, 10, 20, 30]"
      :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
    <!-- --------------------------------------------------- -->
    <el-dialog v-model="dialogVisible" title="编辑订单" width="50%">
      <div>
        <p>省市区县：
          <el-cascader :options="options" clearable />
        </p>
        <p>详细地址：<el-input v-model="citymodel"></el-input>
        </p>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addcity">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogVisible1" title="物流信息" width="50%">
          <el-steps direction="vertical" :active="1" style="height: 800px" >
             <el-step :title="item.context" :description="item.ftime" v-for="(item, index) in listkd" :key="index" />
      </el-steps>
    </el-dialog>

  </div>
</template>
<script>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { getlist, updataorders, kuaidi } from '../../api/orders'
import Table from '../../components/table.vue'
import city from '../../../public/city'
export default {
  setup(props) {
    const data = reactive({
      citymodel: '',
      options: city,
      cols: [
        {
          title: '#',
          type: 'index',
          width:50
        },
        {
          title: '订单编号',
          name: 'order_number'
        },
        {
          title: '订单价格',
          name: 'order_price'
        },
        {
          title: '是否付款',
          slot: 'status'
        },
        {
          title: '是否发货',
          name: 'is_send'
        }, {
          title: '下单时间',
          slot: 'time'
        },
        {
          title: '操作',
          slot: 'action'
        }
      ],
      updataform: [],
      list: [],
      //分页
      total: 0,
      queryModel: {
        //搜索输入框绑定关键字
        qurey: "",
        //当前页数
        pagenum: 1,
        //一页显示几条
        pagesize: 5,
      },
      dialogVisible: false,
      dialogVisible1: false,
      listkd: [],
      showlist:false
    });
    const handleSizeChange = (val) => {
      data.queryModel.pagesize = val
      getorderlist()
    }
    const handleCurrentChange = (val) => {
      data.queryModel.pagenum = val
      getorderlist()
    }
    onMounted(() => {
      getorderlist()
    })
    const getorderlist = () => {
      getlist(data.queryModel).then(res => {
        data.total = res.data.total
        console.log(res.data);
        data.list = res.data.goods
      })
    }
    const updatalist = (row) => {
      data.dialogVisible = true
      data.updataform = row
      console.log(data.updataform);
    }
    const addcity = () => {
      console.log(data.updataform.user_id);
      updataorders(data.updataform).then(res => {
        console.log(res);
      })
    }
    const kuaidilist = (row) => {
      data.dialogVisible1 = true
      kuaidi(row).then(res => {
        data.listkd = res.data
        console.log(data.listkd);
      })
      
    }
    return {
      ...toRefs(data),
      getorderlist,
      handleSizeChange,
      handleCurrentChange,
      updatalist,
      addcity,
      kuaidilist
    };
  },
  components: { Table }
}
</script>
<style lang="scss" scoped>
.orders {
  padding: 20px 10px;
  background: #fff;
  box-shadow: 1px 1px 30px rgb(151, 146, 146);

  .input {
    width: 500px;
  }
}
</style>
